<template>
  <div class="resetPassword" ref="resetPassword">
    <div class="box">
      <div class="logoBox">
        <img src="../../images/logo.png"  class="logo" alt="logo"/>
      </div>
        <div class="resetPasswordBox">
          <input type="text" placeholder="邮箱" id="email" v-model="email" @blur="emailRight">
          <div class="code-box">
            <input type="text" placeholder="验证码" id="code" v-model="verifyCode">
            <button @click.prevent="getVerifyCode" class="btn" v-show="!computedTime">获取验证码</button>
            <button  @click.prevent v-show="computedTime" class="btn btnActive">已发送({{computedTime}}s)</button>
          </div>
        </div>
        <!--<a href="#login" class="cancelLink">取消</a>-->
        <router-link to="/login" class="cancelLink">取消</router-link>
        <button class="btn" @click="resetPw01">下一步</button>

    </div>
    <alert-tip v-if="showAlert" :showHide="showAlert" @closeTip="closeTip" :alertText="alertText"></alert-tip>

  </div>
</template>

<script>
  import alertTip from '../../components/common/alertTip'
  import {mapState, mapMutations} from 'vuex'
export default {
  data () {
    return {
      email: null, //邮箱地址
      verifyCode: null,  //验证码
      computedTime: 0, //倒数记时
      showAlert: false, //显示提示组件
      alertText: null, //提示的内容
    }
  },
  components: {
    alertTip,
  },
  computed: {
    //判断邮箱地址
    rightEmail: function (){
      return /^\w+@(\w+.)+com$/gi.test(this.email)
    },
    rightVerifyCode: function () {
      if (this.verifyCode.length == 4){
        return /^\d+$/gi.test(this.verifyCode);
      }
      return false;
    }
  },
  methods: {
    ...mapMutations([
      'SAVE_RESET_PW',
    ]),
    /**
     * 验证输入框中的邮箱是否正确
     * @returns {Promise.<void>}
     */
    emailRight(){
      if (this.email == null){
        this.showAlert = true;
        this.alertText = '邮箱不能为空！';
        return ;
      }

      if (!this.rightEmail){
        this.showAlert = true;
        this.alertText = '邮箱格式不正确！';
        return ;
      }
    },

    /**
     * 向服务器发送请求，请求服务器向指定的邮箱发送验证码
     * @returns {Promise.<void>}
     */
    async getVerifyCode(){
        if (this.email == null){
          this.showAlert = true;
          this.alertText = '邮箱不能为空！';
          return ;
        }

        if (!this.rightEmail){
          this.showAlert = true;
          this.alertText = '邮箱格式不正确！';
          return ;
        }
        let res = null;
        let url = '/reset_pw_code?email=' + this.email
        await this.axios.get(url).then(response => {
          res = response.data;
        })

        if (res.success){
          this.showAlert = true;
          this.alertText = '验证码已发送到您的邮箱，请您查收。该验证码有效时长为5分钟。';

          this.computedTime = 300;
          this.timer = setInterval(() => {
            this.computedTime --;
            if (this.computedTime == 0) {
              clearInterval(this.timer)
            }
          }, 1000)

        }else {
          this.showAlert = true;
          this.alertText = res.errors.messageCn;
        }

    },

    /**
     * 注册
     * @returns {Promise.<void>}
     */
    async resetPw01(){
        if (this.email == null){
          this.showAlert = true;
          this.alertText = '邮箱不能为空！';
          return ;
        }

        if (!this.rightEmail){
          this.showAlert = true;
          this.alertText = '邮箱格式不正确！';
          return ;
        }
        if (this.verifyCode == null){
          this.showAlert = true;
          this.alertText = '验证码不能为空！';
          return
        }
        if(!this.rightVerifyCode){
          this.showAlert = true;
          this.alertText = '验证码格式不正确！';
          return
        }

        let res = null;
        let param = {
          email: this.email,
          code: this.verifyCode
        }
        await this.axios.post('/reset_password01', param)
          .then(response => {
            res = response.data;
          })
        let resetInfo = {
            email: this.email,
            code: res.result[0].code
        }

        if (res.success){
          this.SAVE_RESET_PW(resetInfo);
          this.$router.push('reset_password02');
        }else {
          this.showAlert = true;
          this.alertText = res.errors.messageCn;
        }

    },
    closeTip(){
      this.showAlert = false;
    }
  },
  mounted (){
    let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

    if(w < h){
      this.$refs.resetPassword.style.height = h +'px';
    }else {
      this.$refs.resetPassword.style.height = w +'px';
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  @import '../../style/mixin';
  .resetPassword{
    background-color: #33CCFF;

    p, span, input{
      font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    }

    .box{
      margin: 0 auto;
      position:absolute;
      top:0;
      left:0;
      width: 16rem;
      height: 16rem;
    }
    /*logo样式区  开始*/
    .logoBox{
      margin: 0 auto;
      width: 7rem;
      height: 3.5rem;
    }

    .logo{
      width: 5.6rem;
      height: 3.5rem;
      margin-top: 1rem;
      margin-left: 0.5rem;
      display: block;
    }
    /*logo样式区  结束*/

    /* 帐号密码输入区样式  开始*/
    .resetPasswordBox{
      margin: 0 auto;
      width: 9rem;
      height: 3rem;
      border: solid 0.05rem #ffffff;
      @include borderRadius(0.4rem);
      margin-top: 2rem;

      input{
        width: 100%;
        height: 50%;
        display: block;
        background-color: transparent;
        margin: 0;
        padding: 0;
        border: hidden;
        font-size: 0.5rem;
        text-indent: 0.4rem;
      }
      ::-webkit-input-placeholder{
        color: #FFFFFF;
        text-indent: 0.4rem;
      }
      :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: #FFFFFF;
        text-indent: 0.4rem;
      }
      ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #FFFFFF;
        text-indent: 0.4rem;
      }
      :-ms-input-placeholder { /* Internet Explorer 10+ */
        color: #FFFFFF;
        text-indent: 0.4rem;
      }

      #email{
        border-bottom: solid 0.05rem #FFFFFF;
      }
      /* 帐号密码输入区样式  结束*/
      /*获取验证码样式  开始*/
      .code-box{
        width: 100%;
        height: 50%;
        #code{
          display: inline;
          width: 4.2rem;
          height: 100%;
        }
        .btn{
          display: inline;
          width: 4.2rem;
          height: 80%;
          margin: 0;
        }
        .btnActive{
          background-color: #bbbbbb;
        }
      }
      /*获取验证码样式  结束*/
    }

    /*忘记密码链接样式  开始*/
    a{
      font-size: 0.5rem;
      color: #FFFFFF;
      text-decoration: underline;
    }
    .cancelLink{
      display: block;
      text-align: center;
      margin-top: 0.5rem;
      margin-bottom: 1rem;
    }
    /*忘记密码链接样式  结束*/

    /*按钮样式  开始*/
    .btn{
      margin: 0 auto;
      display: block;
      background-color: #FFFFFF;
      width: 9rem;
      height: 1.4rem;
      color: #33CCFF;
      font-size: 0.5rem;
      font-weight: bold;
      @include borderRadius(0.7rem);
      margin-top: 1rem;
      margin-bottom: 1rem;
    }
    /*按钮样式  结束*/



  }
</style>
